<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    <father :title="title"></father>
  </div>
</body>
<script>

  /*
    provide(依赖): 将对应的数据发射出去，所有的后代组件都可以接收
    inject(注入): 可以接收所有祖先组件发射出来的数据
  */

  const son = {
    template: `<div>{{title}}子组件 {{count}}</div>`,
    props: ['title'],
    inject: ['count'],
  }

  const father = {
    template: `<div>{{title}}父组件{{count}} --- <son :title='title'></son> </div>`,
    props: ['title'],
    inject: ['count'],
    components: {
      son
    }
  }


  const app = Vue.createApp({
    data () {
      return {
        title: '传家宝',
        count: 100
      }
    },
    // provide 用来发射数据用的
    provide () {
      // return 出去的内容就是传递到后代组件中的内容
      return {
        count: this.count
      }
    },
    components: {
      father
    }
  })
  app.mount('#app')
</script>

</html>
